<template>
	<view>
		<!-- 顶部区域 -->
		<view class="smart-page-head-tiele">text文本组件</view>
	</view>
	
	<view class="smart-padding-wrap">
		<view class="text-box" scroll-y="true">
			<text>{{text}}</text>
		</view>
		<button type="primary" :disabled="!canAdd" @click="add">add line</button>
		<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				texts:[
					'drop感觉加热人看过',
					'j日历功能空间容纳',
					'固然可贵没人开门',
					'如果昆明人看过',
					'公开没人了',
					'让凯美瑞',
					'利润可观pork',
					'如果卖家哦',
					'........'
					
				],
				text:'',
				canAdd:true,
				canRemove:false,
				extraLine:[]
				
			}
		},
		methods: {
			add:function(e){
				this.extraLine.push(this.texts[this.extraLine.length % 12]);
				this.text=this.extraLine.join('\n');
				this.canAdd=this.extraLine.length<12;
				this.canRemove=this.extraLine.length>0;
			},
			remove:function(e){
				if(this.extraLine.length>0){
					this.extraLine.pop();
					this.text=this.extraLine.join('\n');
					this.canAdd=this.extraLine.length<12;
					this.canRemove=this.extraLine.length>0;
				}
			}
		}
	}
</script>

<style>
.text-box{
	margin-bottom: 40rpx;
	padding: 40rpx 0;
	display: flex;
	min-height: 300rpx;
	background-color: #d8d8d8;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 30rpx;
	color: #353535;
	line-height: 1.8;
}


</style>
